<template>
  <div>
    <!-- <el-tab-pane label="附件"> -->
    <el-dialog :visible.sync="dialogVisible" :fullscreen="fullscreen" close-on-click-modal append-to-body>
      <el-row class="top-btn">
        <el-button icon="el-icon-zoom-in" circle title="放大" @click="changeImage('放大')"/>
        <el-button icon="el-icon-refresh" circle title="还原" @click="changeImage('还原')"/>
        <el-button icon="el-icon-zoom-out" circle title="缩小" @click="changeImage('缩小')"/>
        <el-button icon="fa fa-repeat" circle title="旋转" @click="changeImage('旋转')"/>
        <!-- <a :href="dialogItem.fileUrl">
          <el-button icon="el-icon-download" circle title="下载"/>
        </a>-->
        <el-button v-if="!fullscreen" icon="fa fa-window-maximize" circle title="全屏" @click="changeImage('全屏')"/>
        <el-button v-else icon="fa fa-window-restore" circle title="中屏" @click="changeImage('中屏')"/>
      </el-row>
      <img :width="img.imgWidth" :height="img.imgHeight" :style="{transform: 'translate(-50%, -50%) rotate('+img.transform+'deg)',maxWidth: '100%',maxHeight: '100%'}" :src="src" class="view-img">
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'ViewImage',
  // eslint-disable-next-line vue/require-prop-types
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogItem: {}, // 当前点击的图片
      fullscreen: false,
      // 控制图片的样式
      img: {}
    }
  },
  computed: {
    // 计算全屏/中屏的高度
    computedHeight() {
      if (this.fullscreen) {
        return 'calc(100vh - 100px)'
      } else {
        return '600px'
      }
    }
    // 计算图片的索引
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        console.log()
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 预览图片与预览pdf文件等
    handelImg(item) {
      // debugger
      this.dialogItem = item
      this.dialogVisible = true
      if (!this.$refs.elCarousel) {
        setTimeout(() => {
          this.handelImg(item)
        }, 10)
        return false
      } else {
        this.setImgStyle()
        console.log(item.fileCode)
        this.$refs.elCarousel.setActiveItem(this.computedIndex)
        console.log(item.fileCode)
      }
    },
    // 获取图片的信息
    setImgStyle() {
      const item = this.dialogItem
      // 图片地址 后面加时间戳是为了避免缓存
      const img_url = item.fileUrl + '?' + Date.parse(new Date())
      // 创建对象
      const img = new Image()
      // 改变图片的src
      img.src = img_url
      // 加载完成执行
      const _vm = this
      img.onload = function() {
        _vm.$set(_vm.dialogItem, 'imgWidth', img.width)
        _vm.$set(_vm.dialogItem, 'imgHeight', img.height)
        _vm.$set(_vm.dialogItem, 'transform', 0)
        _vm.$set(_vm.img, 'imgWidth', '')
        _vm.$set(_vm.img, 'imgHeight', '')
        _vm.$set(_vm.img, 'transform', 0)
      }
    },
    // 图片操作
    changeImage(type) {
      const imgWidth = this.img.imgWidth ? this.img.imgWidth : this.dialogItem.imgWidth
      const imgHeight = this.img.imgHeight ? this.img.imgHeight : this.dialogItem.imgHeight
      const transform = this.img.transform ? this.img.transform : this.dialogItem.transform
      if (type === '放大') {
        this.$set(this.img, 'imgWidth', imgWidth + 0.2 * imgWidth)
        this.$set(this.img, 'imgHeight', imgHeight + 0.2 * imgHeight)
      } else if (type === '缩小') {
        this.$set(this.img, 'imgWidth', imgWidth - 0.2 * imgWidth)
        this.$set(this.img, 'imgHeight', imgHeight - 0.2 * imgHeight)
      } else if (type === '还原') {
        this.$set(this.img, 'imgWidth', '')
        this.$set(this.img, 'imgHeight', '')
        this.$set(this.img, 'transform', 0)
      } else if (type === '旋转') {
        this.$set(this.img, 'transform', transform + 90)
      } else if (type === '全屏') {
        this.fullscreen = true
      } else if (type === '中屏') {
        this.fullscreen = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .hongte-dialog {
    p {
      line-height: 2;
    }
  }
  .uplaod-img {
    display: inline-block;
    position: relative;
    height: 100%;
    width: 100%;
    text-align: left;
    .img-box {
      position: relative;
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      .img-action {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        .img-icon {
          position: absolute;
          color: #fff;
          width: 100px;
          height: 20px;
          top: 50%;
          left: 50%;
          margin-top: -10px;
          margin-left: -50px;
        }
      }

      &:hover {
        .img-action {
          opacity: 1;
        }
      }
    }
    img {
      width: 100px;
      height: 100px;
      cursor: pointer;
      display: inline-block;
    }
    p {
      display: inline-block;
    }
    a {
      color: #fff;
    }
  }
  .view-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .top-btn {
    position: absolute;
    top: 10px;
    right: 50px;
    i {
      margin-left: 20px;
      top: -2px;
      position: relative;
    }
  }
  .uplaod-img a {
    color: #fff;
  }
  .el-icon-plus{
    margin: 39px
  }
</style>

